<template>
	<view>
		<!-- 我的 -->
		<view class="top"></view>
		<view class="userMsg">
			<view>
				<avatar selWidth="400rpx" selHeight="400upx" @upload="myUpload" :avatarSrc="userList.headUrl"
					avatarStyle="border-radius: 136rpx; width: 136rpx; height: 136rpx;" class="image">111
				</avatar>

			</view>
			<view class="compile" @tap="open">选择标签</view>
			<view class="titleBox">
				<view class="title" v-for="item in userList.titleLike" :key="item.tagId"><text>{{item.tagName}}
					</text>
					<!-- <image src="../../static/img/close.png" mode="widthFix" @tap="removeTap"></image> -->
				</view>
				<!-- <view class="titleAdd" @tap="addTap" v-if="!tabHide">
					<image src="../../static/img/chatAdd.png" mode="widthFix"></image>
				</view>
				<view class="title" v-if="tabHide"><input v-model="tagId" @blur="setTap" />
					<view class="closeBox">
						<image src="../../static/img/close.png" mode="widthFix" @tap="closeTap">
					</view>
				</view> -->
			</view>
			<view class="bottom">
				<view class="bottomBox">
					<text>关注</text>
					<text>0</text>
				</view>
				<view class="bottomBox">
					<text>被关注</text>
					<text>12</text>
				</view>
				<view class="bottomBox">
					<text>谁看过我</text>
					<text>0</text>
				</view>
			</view>
		</view>

		<view>
			<view class="userCon" v-for="item in userConList" :key="item.id">
				<text class="time">{{item.time}}</text>
				<text class="content">{{item.content}}</text>
				<image v-for="item1 in item.conImgList" :key="item1.imgId" :src="item1.url"></image>
			</view>
		</view>

		<view>
			<pop ref="pop" direction="center" :is_close="true" :is_mask="true" :width="100" height="fit-content"
				:maskFun="true">
				<view class="addTag">
					<view class="uni-list">

						<checkbox-group @change="checkboxChange" class="tag">
							<label class="uni-list-cell uni-list-cell-pd" v-for="item in tag" :key="item.id">
								<view>
									<checkbox :value="item.tagName" :checked="item.check" />
								</view>
								<view>{{item.tagName}}</view>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="operation"><button @tap="openPop">确认</button><button @tap="closePop">取消</button></view>
			</pop> `
		</view>
	</view>
</template>

<script>
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	import pop from "@/components/ming-pop/ming-pop.vue";
	export default {
		data() {
			return {
				userList: {
					name: "啊浩",
					xxx: "",
					headUrl: "../../static/head/1.jpg",
					titleLike: [],
				},
				userConList: [{
						id: 0,
						time: "2022-10-20 15:30",
						content: "你好世界",
						conImgList: [{
							imgId: 0,
							url: "../../static/bg/bg1.png"
						}]
					},
					{
						id: 1,
						time: "2022-10-20 15:30",
						content: "你好世界按理说大量释放",
						conImgList: [{
								imgId: 0,
								url: "../../static/bg/bg1.png"
							},
							{
								imgId: 1,
								url: "../../static/bg/bg2.png"
							}
						]
					},
					{
						id: 2,
						time: "2022-10-20 15:30",
						content: "你好世界气人不，司马世家回复你擦阿拉山口大家拉克丝分类拭法兰克福",
						conImgList: [{
								imgId: 0,
								url: "../../static/bg/bg1.png"
							},
							{
								imgId: 1,
								url: "../../static/bg/bg2.png"
							},
							{
								imgId: 2,
								url: "../../static/bg/bg3.png"
							}
						]
					}
				],
				tabHide: false,
				userId: 0,
				tagId: '',
				userName: '',
				userMsg: '',
				tag: [],
			}
		},
		components: {
			avatar,
			pop
		},
		onShow() {
			this.getTag();
			uni.getStorage({
				key: 'userId',
				success: res => {
					//获取存储的用户信息
					this.userMsg = JSON.parse(res.data)
					let data = JSON.parse(res.data)
					this.userId = data.userId
					this.userName = data.userName
					if (data.avatar) {
						this.userList.headUrl = "http://localhost:3000/upload/" + data.avatar
					}

				},

			});
		},
		methods: {
			// 打开弹窗
			async openPop() {
				let arr = []
				this.tag.forEach(item => {
					if (item.tagChecked) {
						let {
							id
						} = item
						arr.push(id)
					}
				})
				// /user/addUserTags
				if(arr.length > 0){
					const res = await this.$myRequest({
						url: "/user/addUserTags",
						method: "POST",
						data:{
							userId: this.userId,
							tagId: arr
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
						},
					})
				}
				
				// console.log("arr", arr)
				// console.log(res)
				this.getTag()
				this.$refs.pop.close();
			},
			// 关闭弹窗
			closePop() {
				this.$refs.pop.close();
			},
			// 打开弹窗
			open() {
				this.$refs.pop.show();
			},
			checkboxChange: function(e) {
				var tag = this.tag,
					values = e.detail.value;
				for (var i = 0, lenI = tag.length; i < lenI; ++i) {
					const item = tag[i]
					if (values.includes(item.tagName)) {
						item.tagChecked = true
					} else {
						item.tagChecked = false
					}
				}
			},
			// 获取标签
			async getTag() {
				const res = await this.$myRequest({
					url: "/user/queryTags",
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
					},
				})
				const res1 = await this.$myRequest({
					url: "/user/queryUserTag?userId=" + this.userId,
					method: "POST",

					header: {
						'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
					},
				})
				// console.log(res1.data.data)
				if (res1.data.code == 200) {
					this.userList.titleLike = res1.data.data
				}
				if (res.statusCode == 200) {
					this.tag = res.data.map(item => {
						item.tagChecked = false
						return item
					})

				}

			},
			// 关闭标签
			closeTap() {
				this.tabHide = false

			},
			//添加标签	
			async setTap() {
				let obj = {
					userId: this.userId,
					tagId: [this.tagId]
				}
				if (this.tagId) {


					// console.log(obj)
					// console.log(res)
					if (res.data.code == 99990000) {
						uni.showModal({
							title: '添加成功',
							content: res.data.msg,
							showCancel: false,
							confirmText: '确定'
						});
						this.tabHide = false
						this.userList.titleLike.push({
							id: this.userList.titleLike.length + 1,
							title: this.tagId
						})
						this.tagId = ''

					} else {
						uni.showModal({
							title: '添加失败',
							content: res.data.msg,
							showCancel: false,
							confirmText: '确定'
						});
					}
				}

			},
			// 打开添加标签
			addTap() {
				this.tabHide = true

			},
			// 删除标签
			remove() {

			},
			myUpload(rsp) {
				// console.log("rsp",rsp)
				this.userList.headUrl = rsp.path;
				//更新头像方式一
				let url = 111111
				const uploadTask = uni.uploadFile({
					url: 'http://localhost:3000/user/updateAvatar', //仅为示例，非真实的接口地址
					filePath: this.userList.headUrl,
					name: 'file',
					formData: {
						name: this.userId + this.userName,
						id: this.userId,
					},
					success: (res) => {
						console.log(res)
						this.userMsg.avatar = JSON.parse(res.data).url
						uni.setStorageSync('userId', JSON.stringify(this.userMsg));
					},
					error: (err) => {
						console.log(err)
					}
				});
			}

		},


	}
</script>

<style lang="scss">
	.operation {
		width: 100%;
		display: flex;
		align-items: center;

		button {
			width: 50%;
			height: 72rpx;
		}
	}

	.addTag {
		.tag {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.uni-list-cell {
				width: 50%;
				display: flex;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}
	}

	.top {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		width: 750rpx;
		height: 836rpx;
		z-index: -1;
		background: linear-gradient(180deg, rgba(184, 134, 248, 0.66) 0%, rgba(184, 134, 241, 0.33) 37%, rgba(184, 134, 134, 0) 100%);
	}

	.userMsg {
		text-align: center;
		font-size: 36rpx;
		color: rgba(16, 16, 16, 1);

		.image {
			display: block;
			border-radius: 136rpx;
			width: 136rpx;
			height: 136rpx;
			margin: 228rpx auto 16rpx;
			border: 4rpx solid white;
		}

		.compile {
			margin: 52rpx auto 40rpx;
			width: 232rpx;
			height: 72rpx;
			font-size: 32rpx;
			line-height: 72rpx;
			border-radius: 40rpx;
			background-color: rgba(147, 210, 243, 0.34);
			text-align: center;
		}

		.titleBox {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			align-items: center;

			.title {
				display: flex;
				align-items: center;
				width: fit-content;
				margin-right: 16rpx;
				margin-bottom: 8rpx;
				height: 48rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				background-color: rgba(147, 210, 243, 0.33);
				text-align: center;
				border: 2rpx solid rgba(187, 187, 187, 1);

				text {
					margin: auto 40rpx;
					line-height: 48rpx;
				}

				image {
					width: 28rpx;
				}
			}

			.titleAdd {
				width: 80rpx;
				border-radius: 40rpx;
				background-color: rgba(147, 210, 243, 0.33);
				text-align: center;
				border: 2rpx solid rgba(187, 187, 187, 1);

				image {
					width: 28rpx;
				}
			}

			.closeBox {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.bottom {
			margin-top: 72rpx;
			display: flex;

			.bottomBox {
				width: 240rpx;
				box-sizing: border-box;
				text-align: center;
			}

			text {
				display: block;
			}
		}
	}

	.userCon {
		margin: 48rpx 32rpx 16rpx;

		.time {
			font-size: 20rpx;
			display: block;
			color: #666;
			margin-bottom: 16rpx;
		}

		.content {
			display: block;
			font-size: 28rpx;
			margin-bottom: 24rpx;
		}

		image {
			max-width: 686rpx;
			border-radius: 24rpx;
			margin-bottom: 16rpx;
		}
	}
</style>
